<template>
	<div class="columns py-6">
		<div class="column is-half is-offset-one-quarter">
			<el-card shadow="never">
				<div slot="header" class="has-text-centered has-text-weight-bold">
					🛬 用户登录
				</div>
				<div>
					<el-form
						ref="loginFormModel"
						:model="loginFormModel"
						:rules="rules"
						v-loading="loading"
						status-icon
						label-width="100px"	
					>
						<!-- 用户名 -->
						<el-form-item label="账号" prop="username">
							<el-input v-model.trim="loginFormModel.username"></el-input>
						</el-form-item>
						<!-- 密码 -->
						<el-form-item label="密码" prop="password">
							<el-input v-model.trim="loginFormModel.password" type="password" autocomplete="off"></el-input>
						</el-form-item>
						<!-- 是否记住登录状态 -->
						<el-form-item label="记住" prop="rememverMe">
							<el-switch v-model="loginFormModel.rememberMe"></el-switch>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="submitForm('loginFormModel')">登录</el-button>
							<el-button @click="resetForm('loginFormModel')">重置</el-button>
						</el-form-item>
					</el-form>
				</div>
			</el-card>
		</div>
	</div>
</template>

<script>
export default {
  	name: "Login",

	data() {
		return {
			redirect: undefined,
		
			loading: false,

			loginFormModel: {
				username: '',
				password: '',
				rememberMe: true,
			},

			rules: {
				username: [
					{ required: true, message: '请输入账号', trigger: 'blur'},
					{ min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
					{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
				]
			}
		}
	},

	methods: {
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				// 若 login 表单验证成功 =>
				if (!valid) return false

				// 若 login 表单验证失败 => 
				// 打开页面加载器
				this.loading = true

				// 调用 store 中 user 模块的 login 方法，而该 login 方法调用 api 中的 login 方法
				this.$store.dispatch('user/login', this.loginFormModel).then(() => {
					this.$message({ message: "恭喜你，登录成功", type: "success", duration: 2000 })

					// 我们需要在任何时候都能获取到 user 的信息，而不是仅仅在 login 时获取
					// this.$store.dispatch('user/getInfo')

					// 而应该每次 页面跳转 或 加载 都要获取 user 的信息。
					// 对此，为了解决 username 刷新页面就消失的问题，编辑 permission.js
					
					setTimeout(() => {
						this.loading = false
						this.$router.push( { path: this.redirect || '/' } )
					}, 0.1 * 1000);
				})
				.catch(() => {
					this.loading = false
				})
			})
		},

		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
  	}
}
</script>

<style scoped>
</style>